<template>
	<xbd-pages-content title="园区热点">
		<template #content>
			<view class="hot-spot">
				<view class="top" :style="'top: ' + top + ';'">
					<v-tabs
						v-model="current"
						:tabs="tabs"
						@change="changeTab"
						pills
						field="hotpoint_type_name"
						paddingItem="0 54rpx"
					></v-tabs>
					<view class="search">
						<uni-easyinput  v-model="keyword" placeholder="请输入文章标题进行查询" placeholderStyle="color: #999999;"/>
						<image class="img" src="@/static/images/common/search.svg" mode="" @click="searchVal"></image>
					</view>
				</view>
				<!-- #ifdef APP-PLUS || H5 -->
				<view style="height: 119px;"></view>
				<!-- #endif -->
				<!-- #ifndef APP-PLUS || H5 -->
				<view style="height: 125px;"></view>
				<!-- #endif -->
				
				<view class="list">
					<uni-load-more
						v-if="loading"
						status="loading"
						:iconSize="12"
						:contentText="{
							contentdown: '上拉显示更多',
							contentrefresh: '正在加载...',
							contentnomore: '到底了~'
					}"></uni-load-more>
					<xbd-null-list v-if="!list.length && !loading"></xbd-null-list>
					<uni-list v-if="list.length">
						<hot-spot-list v-for="item in list" :key="item._id" :news="item" @clickList="clickList"></hot-spot-list>
						<xbd-loading-more :status-num="statusNum" :is-load-more="isLoadMore" @more="loadmore"></xbd-loading-more>
					</uni-list>
				</view>
			</view>
		</template>
	</xbd-pages-content>
</template>

<script>
	import HotSpotList from '@/components/hotspot/HotSpotList.vue';
	import { Hotpoint } from '@/api/index.js';
	export default {
		data() {
			return {
				current: 0,
				tabs: [],
				top: '',
				list: [],
				statusNum: 2,
				isLoadMore: false,
				keyword: '',
				loading: false,
				queryInfo: {
					page: 0,
					perpage: 10,
					keyword: '',
					type: ''
				}
			};
		},
		components: {
			HotSpotList
		},
		methods: {
			// 搜索函数 分页改为第0页 添加keyword 上拉加载控件隐藏
			searchVal() {
				this.isLoadMore = false;
				this.queryInfo.page = 0;
				this.queryInfo.perpage = 10;
				this.queryInfo.keyword = this.keyword;
				this.getList(); 
			},
			// tab切换 分页改为第0页 keyword清空 上拉加载控件隐藏
			changeTab(inx) {
				this.keyword = '';
				this.queryInfo.type = this.tabs[inx].hotpoint_type_code;
				this.isLoadMore = false;
				this.statusNum = 2;
				this.queryInfo.page = 0;
				this.queryInfo.perpage = 10;
				this.queryInfo.keyword = '';
				this.getList(); 
			},
			clickList({_id, hotpoint_title: title}) {
				uni.navigateTo({
					url: `./articledetails?id=${_id}&title=${title}`,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			// 加载更多
			loadmore() {
				// 页数加1 上拉加载控件显示加载中
				this.queryInfo.page++;
				this.statusNum = 1;
				try {
					// this.$showLoading('加载中');
					// 在定时器中执行请求方便 tab切换 关闭请求
					this.timer = setTimeout(async () => {
						const { data: { list } } = await Hotpoint.getHotSpotList(this.queryInfo);
						// uni.hideLoading();
						// 判断是否请求到数据 如果有 push进列表 如果没有  页数减1 上拉加载控件显示到底了
						if (list.length) {
							this.list = this.list.concat(list);
							// 判断 获取到的条数是否与获取个数一致
							if (list.length === this.queryInfo.perpage) {
								// 一致则表示可以继续加载更多
								this.statusNum = 2;
							} else {
								// 不一致则代表没有更多数据了
								this.statusNum = 0;
							}
						} else {
							this.queryInfo.page--;
							this.statusNum = 0;
						}
					}, 0);
				} catch(e) {
					// uni.hideLoading();
					this.queryInfo.page--;
				}
			},
			async getList() {
				// tab切换 先关闭上一个上拉加载更多接口
				clearTimeout(this?.timer);
				// 列表制空
				this.list = [];
				try {
					// 再列表显示加载中状态
					this.loading = true;
					const { data: { list } } = await Hotpoint.getHotSpotList(this.queryInfo);
					// uni.hideLoading();
					// 关闭加载中状态
					this.loading = false;
					this.list = list;
					// 判断获取到的数据 是否与本次接口获取传入的数量是否一致 一致显示上拉加载组件
					if (this.list.length === this.queryInfo.perpage) {
						this.isLoadMore = true;
						this.statusNum = 2;
					}
				} catch(e) {
					// uni.hideLoading();
					this.loading = false;
				}
			},
			async init() {
				try {
					this.$showLoading('加载中');
					const { data: { list } } = await Hotpoint.getHotSpotType();
					uni.hideLoading();
					this.tabs = list;
					this.queryInfo.type = list[0].hotpoint_type_code;
					this.getList();
				}catch(e) {
					uni.hideLoading();
				}
			}
		},
		onLoad() {
			this.init();
			// #ifdef APP-PLUS || H5
			const { statusBarHeight } = uni.getSystemInfoSync();
			this.top = statusBarHeight + 44 + 'px';
			// #endif
			// #ifndef APP-PLUS || H5
			this.top = '0px';
			// #endif
		},
		onReachBottom() {
			// 上拉加载
			// 当下拉组件显示状态 并且显示不是没有数据了 时才进行下拉加载
			if (this.isLoadMore && this.statusNum !== 0) {
				this.loadmore();
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-easyinput__content {
		min-height: 32px;
	}
	::v-deep .content-clear-icon {
		margin-right: 20rpx !important;
	}
	.hot-spot {
		.top {
			position: fixed;
			padding: 20px 50rpx;
			width: 750rpx;
			
			background-color: #FFFFFF;
			
			box-sizing: border-box;
			z-index: 999;
			::v-deep .v-tabs {
				margin-bottom: 20px;
			}
			.search {
				display: flex;
				align-items: center;
				.img {
					width: 40rpx;
					height: 40rpx;
					margin-left: 20rpx;
				}
			}
		}
		// .list {
		// 	/* #ifdef APP-PLUS || H5 */
		// 	margin-top: 174px;
		// 	/* #endif */
		// 	/* #ifndef APP-PLUS || H5 */
		// 	margin-top: 125px;
		// 	/* #endif */
		// }
		::v-deep .uni-list {
			padding: 0 50rpx;
			background-color: #FFFFFF;
		}
		// ::v-deep .xbd-null-list {
		// 	padding-top: 20px;
		// }
	}
</style>
